<template>
  <div class="venue-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">创作者管理</h2>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="showAddDialog = true"
      >
        新增创作者
      </el-button>
    </div>

    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="创作者名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入创作者名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创作者类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择创作者类型"
            clearable
          >
            <el-option label="导演" :value="1"></el-option>
            <el-option label="演员" :value="2"></el-option>
            <el-option label="网红" :value="3"></el-option>
            <el-option label="摄影师" :value="4"></el-option>
            <el-option label="化妆师" :value="5"></el-option>
            <el-option label="" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="正常" :value="1"></el-option>
            <el-option label="维护中" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="handleReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 创作者列表 -->
    <el-card class="table-card" shadow="never">
      <el-table :data="venueList" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="120"></el-table-column>
        <el-table-column
          prop="name"
          label="创作者名称"
          min-width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="type" label="创作者类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="getTypeTagType(scope.row.type)">{{
              scope.row.typeName || getTypeLabel(scope.row.type)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="所在城市"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="联系电话"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="openTime"
          label="营业时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="advanceBookingDay"
          label="提前预订天数"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.advanceBookingDay }}天
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime, "YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
              {{
                scope.row.statusName ||
                (scope.row.status === 1 ? "正常" : "维护中")
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isOpen" label="是否开放" width="100">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.isOpen === 1"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创作者图片" width="100">
          <template slot-scope="scope">
            <div v-if="hasImages(scope.row.pictureList)" class="venue-images">
              <el-image
                :src="buildImageUrl(scope.row.pictureList[0].url)"
                :preview-src-list="getPreviewUrls(scope.row.pictureList)"
                fit="cover"
                style="
                  width: 60px;
                  height: 40px;
                  border-radius: 4px;
                  cursor: pointer;
                "
                :title="`点击查看${getImageCount(scope.row.pictureList)}张图片`"
                @error="handleImageError"
                @click="handleImagePreview(scope.row.pictureList)"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <span
                v-if="getImageCount(scope.row.pictureList) > 1"
                class="image-count"
                >+{{ getImageCount(scope.row.pictureList) - 1 }}</span
              >
            </div>
            <div v-else class="no-image">
              <i class="el-icon-picture-outline"></i>
              <span>暂无图片</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showAddDialog"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="venueForm"
        :rules="venueRules"
        ref="venueForm"
        label-width="100px"
      >
        <el-form-item label="创作者名称" prop="name">
          <el-input
            v-model="venueForm.name"
            placeholder="请输入创作者名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="创作者类型" prop="type">
          <el-select
            v-model="venueForm.type"
            placeholder="请选择创作者类型"
            style="width: 100%"
          >
            <el-option label="导演" :value="1"></el-option>
            <el-option label="演员" :value="2"></el-option>
            <el-option label="网红" :value="3"></el-option>
            <el-option label="摄影师" :value="4"></el-option>
            <el-option label="化妆师" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前所在城市" prop="address">
          <el-input
            v-model="venueForm.address"
            placeholder="请输入当前所在城市"
          ></el-input>
        </el-form-item>
        <el-form-item label="创作者介绍" prop="description">
          <el-input
            v-model="venueForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入创作者介绍"
          ></el-input>
        </el-form-item>
        <el-form-item label="作品集" prop="imageUrls">
          <el-upload
            class="upload-demo"
            action="#"
            ref="upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="handleFileUpload"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
          <el-input
            v-model="venueForm.phoneNumber"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作时间" prop="openTime">
          <el-input
            v-model="venueForm.openTime"
            placeholder="例如：09:00-22:00"
          ></el-input>
        </el-form-item>
        <el-form-item label="提前预订天数" prop="advanceBookingDay">
          <el-input-number
            v-model="venueForm.advanceBookingDay"
            :min="0"
            :max="30"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="开始预订时间" prop="startBookingTime">
          <el-time-picker
            v-model="venueForm.startBookingTime"
            placeholder="选择时间"
            style="width: 100%"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input
                v-model="venueForm.latitude"
                placeholder="纬度"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <el-input
                v-model="venueForm.longitude"
                placeholder="经度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog
      title="图片预览"
      :visible.sync="imagePreviewVisible"
      width="80%"
      :close-on-click-modal="true"
      center
    >
      <div class="image-preview-container">
        <el-carousel
          v-if="previewImageList.length > 1"
          :autoplay="false"
          indicator-position="outside"
          height="500px"
        >
          <el-carousel-item
            v-for="(image, index) in previewImageList"
            :key="index"
          >
            <div class="carousel-image-wrapper">
              <el-image
                :src="image"
                fit="contain"
                style="width: 100%; height: 500px"
                :preview-src-list="previewImageList"
                :initial-index="index"
              >
                <div slot="error" class="image-load-error">
                  <i class="el-icon-picture-outline"></i>
                  <p>图片加载失败</p>
                </div>
              </el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div
          v-else-if="previewImageList.length === 1"
          class="single-image-wrapper"
        >
          <el-image
            :src="previewImageList[0]"
            fit="contain"
            style="width: 100%; height: 500px"
            :preview-src-list="previewImageList"
          >
            <div slot="error" class="image-load-error">
              <i class="el-icon-picture-outline"></i>
              <p>图片加载失败</p>
            </div>
          </el-image>
        </div>
        <div v-else class="no-images">
          <i class="el-icon-picture-outline"></i>
          <p>暂无图片</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { venueAPI } from "../api/venue.js";
import {
  buildImageUrl,
  getPreviewUrls,
  hasImages,
  getImageCount,
  getDefaultImage,
  formatDate,
} from "@/utils";
import constant from "@/constant/constant";
import { uploadAPI } from "../api/upload.js";
export default {
  name: "CreateorManagement",
  data() {
    return {
      loading: false,
      fileList: [],
      submitting: false,
      showAddDialog: false,
      isEdit: false,
      searchForm: {
        name: "",
        type: "",
        status: "",
      },
      venueForm: {
        id: null,
        organizationId: 1,
        name: "",
        type: "",
        address: "",
        description: "",
        phoneNumber: "",
        openTime: "",
        status: 1,
        isOpen: true,
        advanceBookingDay: 1,
        startBookingTime: null,
        latitude: "",
        longitude: "",
      },
      venueRules: {
        name: [
          { required: true, message: "请输入创作者名称", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择创作者类型", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入所在城市", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        openTime: [
          { required: true, message: "请输入工作时间", trigger: "blur" },
        ],
      },
      venueList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0,
      },
      venueTypes: [],
      // 图片预览相关
      imagePreviewVisible: false,
      previewImageList: [],
    };
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? "编辑创作者" : "新增创作者";
    },
  },
  mounted() {
    this.loadVenueTypes();
    this.loadVenueList();
  },
  methods: {
    // 加载创作者列表
    async loadVenueList() {
      this.loading = true;
      try {
        const params = {
          current: this.pagination.current,
          size: this.pagination.size,
          name: this.searchForm.name || undefined,
          type: this.searchForm.type || undefined,
          status: this.searchForm.status || undefined,
          isCreator: 1,
        };

        const result = await venueAPI.list(params);
        // 处理API返回的数据结构
        if (result.data) {
          this.venueList = result.data.records || [];
          this.pagination.current = result.data.current || 1;
          this.pagination.size = result.data.size || 10;
          this.pagination.total = result.data.total || 0;
        } else {
          // 兼容直接返回分页数据的情况
          this.venueList = result.records || [];
          this.pagination.total = result.total || 0;
        }
      } catch (error) {
        this.$message.error("加载创作者列表失败: " + error.message);
        // 如果API调用失败，使用模拟数据
        this.loadMockData();
      } finally {
        this.loading = false;
      }
    },
    // 处理文件上传操作
    handleFileUpload(file) {
      this.loading = true;
      uploadAPI.uploadCreatorPicture(file).then(res => {
        if (res.code === "200") {
              this.fileList[0] = res.data;
              file.onSuccess(res.data);

          if (this.venueForm.imageUrls === undefined) {
            this.$set(this.venueForm, "imageUrls", res.data);
          } else {
              this.$set(
                this.venueForm,
                "imageUrls",
                this.venueForm.imageUrls + "," + res.data
              );
            }
            console.log("imageUrls=" + this.venueForm.imageUrls);
          } 
        }).catch(error => {
          console.error('There has been a problem with your fetch operation:', error);
          })
      },

      handleRemove(file, fileList) {
            console.log(file, fileList);
        },
      handlePreview(file) {
            console.log(file);
        },
      handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
      beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },

    // 加载模拟数据（API调用失败时的备用方案）
    loadMockData() {
      const mockData = {
        current: this.pagination.current,
        size: this.pagination.size,
        total: 2,
        records: [
          {
            id: 1,
            name: "体育中心篮球场",
            type: "basketball",
            address: "北京市朝阳区体育中心路1号",
            phoneNumber: "010-12345678",
            openTime: "06:00-22:00",
            status: 1,
            isOpen: true,
            advanceBookingDay: 7,
          },
          {
            id: 2,
            name: "奥林匹克羽毛球馆",
            type: "badminton",
            address: "北京市朝阳区奥林匹克公园",
            phoneNumber: "010-87654321",
            openTime: "08:00-21:00",
            status: 1,
            isOpen: true,
            advanceBookingDay: 5,
          },
        ],
      };

      this.venueList = mockData.records;
      this.pagination.total = mockData.total;
    },

    // 加载创作者类型
    async loadVenueTypes() {
      try {
        const types = await venueAPI.listVenueType();
        this.venueTypes = types || [];
      } catch (error) {
        console.warn("加载创作者类型失败，使用默认数据:", error.message);
        // 使用默认创作者类型
        this.venueTypes = [
          { value: "basketball", label: "导演" },
          { value: "badminton", label: "演员" },
          { value: "tennis", label: "摄影" },
          { value: "football", label: "化妆师" },
          { value: "HANDBALL", label: "大网红" },
        ];
      }
    },

    // 模拟API调用
    mockApiCall() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: {
              records: [
                {
                  id: 1,
                  name: "体育中心篮球场",
                  type: "basketball",
                  address: "北京市朝阳区体育中心路1号",
                  phoneNumber: "010-12345678",
                  openTime: "06:00-22:00",
                  status: 1,
                  isOpen: true,
                  advanceBookingDay: 7,
                },
                {
                  id: 2,
                  name: "奥林匹克羽毛球馆",
                  type: "badminton",
                  address: "北京市朝阳区奥林匹克公园",
                  phoneNumber: "010-87654321",
                  openTime: "08:00-21:00",
                  status: 1,
                  isOpen: true,
                  advanceBookingDay: 5,
                },
              ],
              total: 2,
            },
          });
        }, 1000);
      });
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1;
      this.loadVenueList();
    },

    // 重置
    handleReset() {
      this.searchForm = {
        name: "",
        type: "",
        status: "",
      };
      this.handleSearch();
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true;
      this.venueForm = { ...row };
      this.showAddDialog = true;
    },

    // 删除
    async handleDelete(row) {
      console.log(row.id);
      try {
        await this.$confirm("确认删除该创作者吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        const params = {
          id: row.id || undefined,
        };
        await venueAPI.removeByIds(params);
        this.$message.success("删除成功");
        this.loadVenueList();
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败: " + error.message);
        }
      }
    },

    // 状态变更
    async handleStatusChange(row) {
      var isOpen = 0;
      if (row.isOpen == 0) {
        isOpen = 1;
      }
      try {
        const params = {
          id: row.id,
          isOpen: isOpen,
        };
        await venueAPI.update(params);
        console.log(row);
        this.$message.success("状态更新成功");
        this.loadVenueList();
      } catch (error) {
        if (error !== false) {
          this.$message.error("操作失败: " + error.message);
        }
      } finally {
        // this.submitting = false
      }
    },

    // 提交表单
    async handleSubmit() {
      try {
        // await this.$refs.venueForm.validate()
        this.submitting = true;
        const params = {
          name: this.venueForm.name || undefined,
          id: this.venueForm.id || undefined,
          type: this.venueForm.type || undefined,
          address: this.venueForm.address || undefined,
          description: this.venueForm.description || undefined,
          openTime: this.venueForm.openTime || undefined,
          phoneNumber: this.venueForm.phoneNumber || undefined,
          advanceBookingDay: this.venueForm.advanceBookingDay || undefined,
          startBookingTime: this.venueForm.startBookingTime || undefined,
          latitude: this.venueForm.latitude || undefined,
          longitude: this.venueForm.longitude || undefined,
          status: this.venueForm.status || undefined,
          isCreator: 1,
          imageUrls: this.venueForm.imageUrls || undefined,
        };
        if (this.isEdit) {
          // 修改创作者

          await venueAPI.update(params);
          this.$message.success("修改成功");
        } else {
          // 新增创作者
          console.log(params);
          await venueAPI.save(params);

          this.$message.success("新增成功");
        }

        this.showAddDialog = false;
        this.resetForm();
        this.loadVenueList();
      } catch (error) {
        if (error !== false) {
          this.$message.error("操作失败: " + error.message);
        }
      } finally {
        this.submitting = false;
      }
    },

    // 重置表单
    resetForm() {
      this.isEdit = false;
      this.venueForm = {
        id: null,
        organizationId: 1,
        name: "",
        type: "",
        address: "",
        description: "",
        phoneNumber: "",
        openTime: "",
        status: 1,
        isOpen: true,
        advanceBookingDay: 7,
        startBookingTime: null,
        latitude: "",
        longitude: "",
      };
      this.$refs.venueForm && this.$refs.venueForm.resetFields();
    },

    // 分页
    handleSizeChange(size) {
      this.pagination.size = size;
      this.loadVenueList();
    },

    handleCurrentChange(current) {
      this.pagination.current = current;
      this.loadVenueList();
    },

    // 获取类型标签样式
    getTypeTagType(type) {
      // 支持数字类型ID和字符串类型
      const typeMap = {
        // 字符串类型
        // basketball: "success",
        // badminton: "primary",
        // tennis: "warning",
        // football: "info",
        // 数字类型ID
        1: "success", // 篮球
        2: "primary", // 羽毛球
        3: "info", // 足球
        4: "danger", // 乒乓球
        5: "warning", // 网球
      };
      return typeMap[type] || "info";
    },

    // 获取类型标签文本
    getTypeLabel(type) {
      // 支持数字类型ID和字符串类型
      const typeMap = {
        // 字符串类型
        // basketball: "篮球场",
        // badminton: "羽毛球场",
        // tennis: "网球场",
        // football: "足球场",
        // 数字类型ID
        1: "导演",
        2: "演员",
        3: "网红",
        4: "摄影师",
        5: "化妆师",
      };
      return typeMap[type] || type;
    },

    // 图片处理相关方法
    buildImageUrl,
    getPreviewUrls,
    hasImages,
    getImageCount,
    getDefaultImage,

    // 日期格式化
    formatDate,

    // 处理图片加载错误
    handleImageError(e) {
      console.warn("图片加载失败:", e.target.src);
      // 可以在这里设置默认图片或其他处理逻辑
    },

    // 获取创作者类型信息（从常量中）
    getVenueTypeInfo(type) {
      return constant.creatorTypes[type] || { name: type, color: "info" };
    },

    // 获取状态信息（从常量中）
    getStatusInfo(status) {
      return constant.statusTypes[status] || { name: "未知", color: "info" };
    },

    // 处理图片预览
    handleImagePreview(pictureList) {
      if (pictureList && pictureList.length > 0) {
        this.previewImageList = this.getPreviewUrls(pictureList);
        this.imagePreviewVisible = true;
      }
    },
  },
};
</script>

<style scoped>
.venue-management {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1d39c4;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.search-form {
  margin-bottom: 0;
}

.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}

/* Element UI 样式覆盖 */
::v-deep .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

::v-deep .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

::v-deep .el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

::v-deep .el-button--danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

::v-deep .el-button--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

::v-deep .el-button--danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

::v-deep .el-button.el-button--mini {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-table .el-button + .el-button {
  margin-left: 8px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.action-buttons .el-button {
  margin: 0;
  min-width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button i {
  margin-right: 4px;
}

::v-deep .el-input__inner {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

::v-deep .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

::v-deep .el-select .el-input__inner {
  border-radius: 8px;
}

::v-deep .el-table {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-table th {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  color: #1d39c4;
  font-weight: 600;
  border: none;
}

::v-deep .el-table td {
  border: none;
  border-bottom: 1px solid #f0f2f5;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafbff;
}

::v-deep .el-pagination {
  text-align: right;
}

::v-deep .el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
}

::v-deep .el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  padding: 20px 24px;
}

::v-deep .el-dialog__title {
  color: #1d39c4;
  font-weight: 600;
  font-size: 18px;
}

::v-deep .el-form-item__label {
  color: #1d39c4;
  font-weight: 500;
}

::v-deep .el-tag {
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-switch.is-checked .el-switch__core {
  background-color: #667eea;
}

/* 创作者图片样式 */
.venue-images {
  position: relative;
  display: inline-block;
}

.image-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1;
}

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  background: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  color: #999;
  font-size: 10px;
}

.no-image i {
  font-size: 16px;
  margin-bottom: 2px;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #999;
}

.image-error i {
  font-size: 20px;
}

/* 图片预览对话框样式 */
.image-preview-container {
  text-align: center;
}

.carousel-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  background: #f8f9fa;
}

.single-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 8px;
}

.image-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.image-load-error i {
  font-size: 48px;
  margin-bottom: 10px;
}

.image-load-error p {
  margin: 0;
  font-size: 14px;
}

.no-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #999;
}

.no-images i {
  font-size: 64px;
  margin-bottom: 15px;
}

.no-images p {
  margin: 0;
  font-size: 16px;
}

::v-deep .el-carousel__indicator {
  background-color: rgba(0, 0, 0, 0.3);
}

::v-deep .el-carousel__indicator.is-active {
  background-color: #667eea;
}

@media (max-width: 768px) {
  .venue-management {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .search-form {
    display: block;
  }

  .search-form .el-form-item {
    display: block;
    margin-bottom: 15px;
  }
}
</style>
